<template>
    <div class="selectionMonad" v-if="type === '3'">
        <van-popover v-model:show="billShowPopover" :actions="billActions" @select="billOnSelect">
            <template #reference>
                <div class="selectionMonadType">
                    {{ billName }}<img src="@/assets/productHome/icon_heisexiasanjiao.png" alt="">
                </div>
            </template>
        </van-popover>
        <van-divider vertical />
        <van-popover v-model:show="sourceShowPopover" :actions="sourceActions" @select="sourceOnSelect">
            <template #reference>
                <div class="selectionMonadType">
                    {{ sourceName }}<img src="@/assets/productHome/icon_heisexiasanjiao.png" alt="">
                </div>
            </template>
        </van-popover>
    </div>
    <div class="selectedItems" v-else>
        <div class="selectedItems_tag selectedItems_tag_lan" v-if="type === '2' && datas?.outType == 4">主播</div>
        <div class="selectedItems_tag selectedItems_tag_lv" v-if="type === '2' && datas?.outType != 4">产品</div>
        <div class="selectedItems_div">
            <div class="selectedItems_div_left" v-if="type === '1'">
                <b>选品批次</b>
                <span>{{ datas?.selectionId }}</span>
            </div>
            <div class="selectedItems_div_left" v-if="type === '2'">

                <b>出库单</b>
                <span>{{ datas?.outId }}</span>
            </div>
            <div v-if="type === '1'">
                <div
                    :class="{ selectedItems_div_right: true, selectedItems_div_right_lan: datas?.stockStatus === '部分入库', selectedItems_div_right_lv: datas?.stockStatus === '全部入库', selectedItems_div_right_hong: datas?.stockStatus === '未入库' }">
                    {{ datas?.stockStatus }}</div>
            </div>
            <div v-if="type === '2'">
                <div v-if="status" :class="`selectedItems_div_right ${isStatusClass(datas?.status)}`">{{ datas?.status
                    }}
                </div>
            </div>
        </div>
        <div class="selectedItems_div" v-if="type === '1'">
            <div class="selectedItems_div_center">
                <b>选品人</b>
                <span>{{ datas?.coreName }}</span>
            </div>
            <div class="selectedItems_div_center space_between">
                <b>选品总数</b>
                <div>
                    <span class="lan">{{ datas?.stockNum }}</span><span>/{{ datas?.countNum }}</span>
                </div>
            </div>
        </div>
        <div class="selectedItems_divOne" v-if="type === '2' && datas?.outType === 4">
            <div class="selectedItems_divOne_center">
                <b>借调方</b>
                <span>{{ datas?.coreDeptName }}</span>
            </div>
            <div class="selectedItems_divOne_center space_between">
                <b>出借方</b>
                <div><span>{{ datas?.loanDeptName }}</span></div>
            </div>
            <div class="selectedItems_divOne_center">
                <b>借调总数</b>
                <span>{{ datas?.outNum }}</span>
            </div>
        </div>
        <div class="selectedItems_div" v-if="type === '2' && datas?.outType === 4">
            <div class="selectedItems_div_left">
                <b>借调时间</b>
                <span>{{ datas?.outTime }}</span>
            </div>
        </div>
        <div class="selectedItems_divOne" v-if="type === '2' && datas?.outType !== 4">
            <div class="selectedItems_divOne_center">
                <b>出库去向</b>
                <div><span>{{ datas?.coreDeptName }}</span></div>
            </div>
            <div class="selectedItems_divOne_center space_between">
                <b>出库人</b>
                <div><span>{{ datas?.outUserName }}</span></div>
            </div>
            <div class="selectedItems_divOne_center">
                <b>出库种类</b>
                <div><span>{{ datas?.productNum }}</span></div>
            </div>
            <div class="selectedItems_divOne_center space_between">
                <b>出库总数</b>
                <div><span>{{ datas?.outNum }}</span></div>
            </div>
        </div>
        <div class="selectedItems_div" v-if="type === '2' && datas?.outType !== 4">
            <div class="selectedItems_div_left">
                <b>出库时间</b>
                <span>{{ datas?.outTime }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps(['type', 'status', 'datas', 'putStatus', 'outType'])
const emit = defineEmits(['update:putStatus', 'update:outType', 'onSelect'])

const billShowPopover = ref(false)
const billName = ref('出库单状态')
const billActions = ref([
    { text: '全部', id: '' },
    { text: '未超期', id: 3 },
    { text: '有超期', id: 4 },
    { text: '已归还', id: 1 },
])
const sourceShowPopover = ref(false)
const sourceName = ref('出库来源')
const sourceActions = ref([
    { text: '全部', id: '' },
    { text: '产品出库', id: 1 },
    { text: '主播借调', id: 2 },
])
// 出库单状态
const billOnSelect = (action: any) => {
    billName.value = action.text === '全部' ? '出库单状态' : action.text
    emit('update:putStatus', action.id)
    emit('onSelect')
};
// 出库来源
const sourceOnSelect = (action: any) => {
    sourceName.value = action.text === '全部' ? '出库来源' : action.text
    emit('update:outType', action.id)
    emit('onSelect')

};

const isStatusClass = (status: string) => {
    if (status === '已归还') {
        return 'selectedItems_div_right_lv'
    } else if (status === '部分还' || status === '超期归还') {
        return 'selectedItems_div_right_huang'
    } else if (status.includes('超期')) {
        return 'selectedItems_div_right_hong'
    } else if (status.includes('已选')) {
        return 'selectedItems_div_right_lan'
    }
}
</script>

<style lang="less" scoped>
.selectedItems {
    width: 100%;
    background: #fff;
    padding: 25px 15px 1px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-radius: 5px;
    position: relative;

    .selectedItems_tag {
        width: 40px;
        height: 20px;
        border-radius: 5px 0px 5px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 10px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .selectedItems_tag_lan {
        background: #EBF4FF;
        color: #0094FF;
    }

    .selectedItems_tag_lv {
        background: #E7FDEE;
        color: #19D11B;
    }

    b {
        font-weight: 400;
        font-size: 14px;
        color: #1A1B1C;
        width: 70px;
    }

    span {
        font-weight: 500;
        font-size: 14px;
        color: #8492AD;
        flex: 0.9;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .space_between {
        justify-content: space-between;
    }

    .selectedItems_divOne {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .selectedItems_divOne_center {
            width: 50%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
    }

    .selectedItems_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-wrap: wrap;



        .selectedItems_div_center {
            display: flex;
            align-items: center;
            width: 50%;

            .lan {
                color: #0094FF;
            }
        }

        .selectedItems_div_left {
            display: flex;
            align-items: center;
            flex: 1;
        }

        .selectedItems_div_right {
            width: 68px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            border-radius: 2px;
            font-weight: 500;
            font-size: 12px;
            margin-left: 10px;
        }

        .selectedItems_div_right_lan {
            background: #EBF4FF;
            color: #0094FF;
        }

        .selectedItems_div_right_lv {
            background: #E7FDEE;
            color: #19D11B;
        }

        .selectedItems_div_right_hong {
            background: #FDE7E7;
            color: #FC2540;
        }

        .selectedItems_div_right_huang {
            background: #FFE9E1;
            color: #FF5A1A;
        }
    }
}

.selectionMonad {
    width: 100%;
    height: 44px;
    margin-bottom: 10px;
    background: #FFFFFF;
    display: flex;
    align-items: center;

    :deep(.van-popover__wrapper) {
        flex: 1;
    }

    .selectionMonadType {
        width: 100%;
        font-weight: 400;
        font-size: 14px;
        color: #1A1B1C;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 10px;
            height: 6px;
            margin-left: 5px;
        }
    }
}
</style>